<template>
  <div class="source">
    <el-form :model="goodInfo" :rules="addInfoRules" ref="goodInfo" label-width="110px">
      <fieldset style="border: none;padding: 0;border-top: 1px solid #eee;">
        <legend>
          <a name="hr">分类选择</a>
        </legend>
      </fieldset>
      <el-row style="margin-bottom: 0px; margin-top: 20px;">
        <el-col :span="6">
          <el-form-item label="选择分类">
            <el-select value-key="id" :disabled="disabledGoods" v-model="categoryTopId" filterable clearable placeholder="请选择" @change="changeTopCategory">
              <el-option
                v-for="item in categorys"
                :key="item.id"
                :label="item.catName"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级分类">
            <el-select value-key="id" :disabled="categorySecondDisabled" v-model="categorySecondId" filterable placeholder="请选择" @change="changeSecondCategory">
              <el-option
                v-for="item in categorySeconds"
                :key="item.id"
                :label="item.catName"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="三级分类">
            <el-select value-key="id" :disabled="categoryThirdDisabled" v-model="categoryThirdId" filterable placeholder="请选择" @change="changeThirdCategory">
              <el-option
                v-for="item in categoryThirds"
                :key="item.id"
                :label="item.catName"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button @click="resetCategory" type="info" :disabled="disabledGoods">分类重置</el-button>
        </el-col>
      </el-row>
      <fieldset style="border: none;padding: 0;border-top: 1px solid #eee;">
        <legend>
          <a name="hr">基本信息</a>
        </legend>
      </fieldset>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-form-item label="商品货号：" prop="goodsSn">
            <el-input v-model="goodInfo.goodsSn" placeholder="请输入商品货号" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称：" prop="goodsName">
            <el-input v-model="goodInfo.goodsName" placeholder="请输入商品名称" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="7">
          <el-button @click="resetForm('goodInfo')" type="info" :disabled="disabledGoods">信息重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item  label="单位：" prop="goodsUnit">
            <el-input v-model="goodInfo.goodsUnit" placeholder="请输入商品单位" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  label="关键字：" prop="keywords">
            <el-input v-model="goodInfo.keywords" placeholder="请输入商品关键字" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  label="重量（kg）：" prop="goodsWeight">
            <el-input v-model="goodInfo.goodsWeight" placeholder="请输入商品重量" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item  label="销售价：" prop="shopPrice">
            <el-input v-model="goodInfo.shopPrice" placeholder="请输入销售价" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  label="成本价：" prop="costPrice">
            <el-input v-model="goodInfo.costPrice" placeholder="请输入成本价" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  label="市场价：" prop="marketPrice">
            <el-input v-model="goodInfo.marketPrice" placeholder="请输入市场价" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item  label="简短描述：" prop="goodsBrief">
            <el-input v-model="goodInfo.goodsBrief" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入商品简短描述(不超过50字)" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item  label="详细描述：" prop="goodsDesc">
            <el-input v-model="goodInfo.goodsDesc" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入商品详细描述（不超过100字）" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item  label="备注：" prop="sellerNote">
            <el-input v-model="goodInfo.sellerNote" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="商家备注（仅商家可见；不超过100字）" :disabled="disabledGoods"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item label="详情轮播图：" :required="true">
            <el-upload
              :disabled="disabledGoods"
              class="upload-demo"
              ref="uploadImgList"
              action="http://localhost:8888/shopGoods/data/uploadFile"
              :headers="uploadHeaders"
              list-type="picture-card"
              :limit="10"
              :on-exceed="exceedImgList"
              :before-upload="beforeUploadImgList"
              :on-success="successImgList"
              :on-remove="removeImgList">
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">详情页轮播图（最多不超过10张图）</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 0px">
        <el-col :span="20">
          <el-form-item label="展示图：" :required="true">
            <el-upload
              :disabled="disabledGoods"
              class="upload-demo"
              ref="uploadImgThumb"
              action="http://localhost:8888/shopGoods/data/uploadFile"
              :headers="uploadHeaders"
              list-type="picture-card"
              :limit="15"
              :on-exceed="exceedImgThumb"
              :before-upload="beforeUploadImgThumb"
              :on-success="successImgThumb"
              :on-remove="removeImgThumb">
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">商品列表展示图（最多不超过15张图）</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <fieldset style="border: none;padding: 0;border-top: 1px solid #eee; margin-bottom: 20px">
        <legend>
          <a name="hr">分类属性</a>
        </legend>
      </fieldset>

      <el-form :model="attributeForm" ref="attributeForm" label-width="110px">
        <el-row
          v-for="(attribute, indexTop) in attributeForm.attributes"
          :key="indexTop">
          <el-col :span="8">
            <el-form :model="attribute" ref="attribute" label-width="110px">
              <el-form-item
                v-for="(goodsAttr, indexAttr) in attribute.goodsAttrs"
                :label="goodsAttr.attrName+'-'+(indexAttr)+'：'"
                :key="goodsAttr.keyId"
                :prop="'goodsAttrs.'+indexAttr+'.attrValue'"
                :rules="{ required: true, message: '请输入“'+goodsAttr.attrName+'-'+indexAttr+'”的属性值', trigger: 'blur' }">
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="goodsAttr.attrValue" :disabled="disabledGoods"></el-input>
                  </el-col>
                  <el-col :span="4" :offset="2">
                    <el-button @click.prevent="removeGoodsAttr(goodsAttr, attribute)" icon="el-icon-delete" :disabled="disabledGoods"></el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button @click="addGoodsAttr(attribute, indexTop)" icon="el-icon-plus" :disabled="disabledGoods"></el-button>
            <el-button @click="restGoodsAttr(attribute, indexTop)" type="info" :disabled="disabledGoods">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-form-item>
        <el-button type="primary" @click="submitForm('goodInfo')" :disabled="disabledSubmit">提交保存<i class="el-icon-upload2 el-icon--right"></i></el-button>
        <el-button type="primary" @click="nextAdd" v-show="nextAddButton">继续添加<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/display.css'
  import forSaleApi from '@/api/backstage/forSale'
  import pagesApi from '@/api/backstage/pages'
  import { getToken } from '@/utils/auth'
  export default {
    inject:['reload'],
    name: 'Goods_addGoods',
    data() {
      const validateGoodsSn = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入商品编号！'));
        } else if (value.length > 50) {
          callback(new Error('商品编号不能超过50字！'));
        } else {
          forSaleApi.checkgoodsSn(value).then(res => {
            if (res.data == null || res.data.length === 0){
              callback();
            } else {
              callback(new Error('该商品编号有重复！'));
            }
          })
        }
      }
      const validateGoodsName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入商品名称'));
        }
        callback(this.valueLengthRule(value, '商品名称', 100));
      }
      const validateGoodsUnit = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入商品单位'));
        }
        callback(this.valueLengthRule(value, '商品单位', 3));
      }
      const validateKeywords = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入商品关键字'));
        }
        callback(this.valueLengthRule(value, '商品关键字', 30));
      }
      const validateGoodsWeight = (rule, value, callback) => {
        if (value === ''){
          callback(new Error('请输入商品重量'));
        }
        let weightRegex = /^([1-9]\d{0,6}|0)([.]?|(\.\d{1,3})?)$/
        if (!weightRegex.test(value)){
          callback(new Error('商品重量范围在0.000~9999999.999（最多保留3位小数）'));
        }
        callback();
      }
      const validateShopPrice = (rule, value, callback) => {
        if (value === ''){
          callback(new Error('请输入商品销售价格'));
        }
        let shopPriceRegex = /^([1-9]\d{0,7}|0)([.]?|(\.\d{1,2})?)$/
        if (!shopPriceRegex.test(value)){
          callback(new Error('商品销售价格范围在0.00~9999999.99（最多保留2位小数）'));
        }
        callback();
      }
      const validateCostPrice = (rule, value, callback) => {
        if (value === ''){
          callback(new Error('请输入商品成本价格'));
        }
        let shopPriceRegex = /^([1-9]\d{0,7}|0)([.]?|(\.\d{1,2})?)$/
        if (!shopPriceRegex.test(value)){
          callback(new Error('商品销售价格范围在0.00~9999999.99（最多保留2位小数）'));
        }
        callback();
      }
      const validateMarketPrice = (rule, value, callback) => {
        if (value === ''){
          callback();
        } else {
          let marketPriceRegex = /^([1-9]\d{0,7}|0)([.]?|(\.\d{1,2})?)$/
          if (!marketPriceRegex.test(value)){
            callback(new Error('商品销售价格范围在0.00~9999999.99（最多保留2位小数）'));
          }
        }
        callback();
      }
      const validateGoodsBrief = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入简短描述'));
        }
        callback(this.valueLengthRule(value, '简短描述', 50));
      }
      const validateGoodsDesc = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入详细描述'));
        }
        callback(this.valueLengthRule(value, '详细描述', 50));
      }
      const validateSellerNote = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入备注'));
        }
        callback(this.valueLengthRule(value, '备注', 50));
      }
      return {
        uploadHeaders: {
          'user-token':getToken()
        },
        categorys:[],
        categoryTopId:'',
        categorySeconds:[],
        categorySecondId:'',
        categorySecondDisabled: true,
        categoryThirds:[],
        categoryThirdId:[],
        categoryThirdDisabled: true,
        attributeForm:{attributes: []},
        // attributeForm:{
        //   attributes: [{}]
        // },
        /**分类相关结束**/
        imgInfos:[],
        imgUidThumb:[],
        imgUidList:[],
        goodsId:'',
        goodInfo: {
          goodsSn: '',
          goodsName: '',
          goodsUnit: '',
          keywords: '',
          goodsWeight: '',
          shopPrice: '',
          costPrice: '',
          marketPrice: '',
          goodsBrief: '',
          goodsDesc: '',
          sellerNote: '',
        },
        addInfoRules: {
          goodsSn: [{required: true, trigger: 'blur', validator: validateGoodsSn}],
          goodsName: [{required: true, trigger: 'blur', validator: validateGoodsName}],
          goodsUnit: [{required: true, trigger: 'blur', validator: validateGoodsUnit}],
          keywords: [{required: true, trigger: 'blur', validator: validateKeywords}],
          goodsWeight: [{required: true, trigger: 'blur', validator: validateGoodsWeight}],
          shopPrice: [{required: true, trigger: 'blur', validator: validateShopPrice}],
          costPrice: [{required: true, trigger: 'blur', validator: validateCostPrice}],
          marketPrice: [{required: true, trigger: 'blur', validator: validateMarketPrice}],
          goodsBrief: [{required: true, trigger: 'blur', validator: validateGoodsBrief}],
          goodsDesc: [{required: true, trigger: 'blur', validator: validateGoodsDesc}],
          sellerNote: [{required: true, trigger: 'blur', validator: validateSellerNote}],
        },
        mainShow: true,
        /** 提交后详情页面输入框或选择框不可操作 **/
        disabledGoods: false,
        disabledReset: false,
        disabledSubmit: false,
        nextAddButton: false
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData(){
        pagesApi.getCategory({showInNav:1,display:1}).then(res => {
          this.categorys = res.data;
        })
      },
      resetForm(formName){
        this.$refs[formName].resetFields();
        this.$refs.uploadImgThumb.clearFiles();
        this.$refs.uploadImgList.clearFiles();
        this.imgUidThumb = [];
        this.imgUidList = [];
        this.imgInfos = [];
      },
      submitForm(goodInfoOfSubmit) {
        /** 商品提交按钮 **/
        /** 商品分类检测---开始 **/
        /** 商品是否分类 **/
        if (!this.categorySecondId.hasOwnProperty("id") || this.categorySecondId.id.length != 32){
          /** 商品没有二级或三级分类，只要没有二级分类就没有三级分类，而二级分类有了，分类选项目的也达到了 **/
          this.$notify.warning({title:'提示', message:'商品必须选择二级或三级分类'});
          return false;
        }
        /** 商品分类属性列检测 **/
        let attributesValid = true;
        this.attributeForm.attributes.forEach((attribute, index) => {
          this.$refs['attribute'][index].validate(valid => {
            if (!valid){
              attributesValid = false;
            }
          })
        });
        if (!attributesValid){
          /** 商品分类属性不合规 **/
          this.$notify.warning({title:'提示', message:'商品分类属性值不合规'});
          return false;
        }
        /** 定义商品属性值信息 **/
        let goodsAttrInfos = JSON.parse(JSON.stringify(this.attributeForm.attributes));
        /** 商品分类检测---结束 **/
        /** 商品基本信息---开始 **/
        this.$refs[goodInfoOfSubmit].validate(valid => {
          if(valid) {
            if (this.imgUidThumb == null || this.imgUidThumb.length==0){
              /** 展示图检测 **/
              this.$notify.warning({title:'提示', message:'展示图不能为空！'});
              return false
            }
            if (this.imgUidList == null || this.imgUidList.length==0){
              /** 轮播图检测 **/
              this.$notify.warning({title:'提示', message:'详情轮播图不能为空！'});
              return false
            }
            /** 图片信息清空在赋值 **/
            this.imgInfos = [];
            for (let i = 0; i < this.imgUidThumb.length; i++){
              /** 展示图数据填充 **/
              this.imgInfos.push({
                url: this.imgUidThumb[i].url,
                type: 1,
                photoSort: (i + 1)*10
              })
            }
            for (let i = 0; i < this.imgUidList.length; i++){
              /** 轮播图数据填充 **/
              this.imgInfos.push({
                url: this.imgUidList[i].url,
                type: 2,
                photoSort: (i + 1) * 10
              })
            }
            this.goodInfo.catId = (!this.categoryThirdId.hasOwnProperty("id") || this.categoryThirdId.id.length != 32)==true?this.categorySecondId.id:this.categoryThirdId.id;
            forSaleApi.saveGoods(JSON.parse(JSON.stringify(this.goodInfo)), this.imgInfos, goodsAttrInfos).then(res => {
              this.goodsId = res.data.id;
              this.$notify.success({title:'成功', message:'商品添加成功'});
              this.buttonDisabledRule(3);
            }).catch(() => {
              this.$notify.error({title:'警告', message:'商品添加失败！'});
              this.buttonDisabledRule(2);
            })
          } else {
            /** 基本 **/
            this.$notify.warning({title:'提示', message:'信息不合规！'});
            this.buttonDisabledRule(2);
            return false
          }
        })
      },
      /** 图片相关操作---开始 **/
      exceedImgThumb(file, fileList){
        /** 展示图超出数量限制的钩子 **/
        this.$notify.warning({title:'提示', message:'当前限制选择15个文件，已超出了可选择数量'});
      },
      beforeUploadImgThumb(file) {
        /** 展示图上传前的钩子 **/
        const isJPG = file.type === 'image/jpeg';
        const isLt1M = file.size / 1024 / 1024 < 2;
        this.beforeUploadImgRule(isJPG,"JPG",isLt1M,"2MB")
        return isJPG && isLt1M;
      },
      successImgThumb(response, file, fileList){
        /** 展示图成功后的钩子 **/
        this.imgUidThumb.push({
          uid: file.uid,
          name: file.name,
          url: response.data[file.name]
        })
      },
      removeImgThumb(file, fileList){
        /** 文件列表移除时，移除后的钩子 **/
        let imgUidThumb = this.imgUidThumb
        for(let i = 0; i < imgUidThumb.length; i++){
          if (imgUidThumb[i].uid==file.uid){
            this.imgUidThumb.splice(i,1)
            break
          }
        }
      },
      exceedImgList(file, fileList){
        this.$notify.warning({title:'提示', message:'当前限制选择10个文件，已超出了可选择数量'});
      },
      beforeUploadImgList(file){
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        this.beforeUploadImgRule(isJPG,"JPG",isLt2M,"2MB")
        return isJPG && isLt2M;
      },
      successImgList(response, file, fileList){
        let imgUid = {
          uid: file.uid,
          name: file.name,
          url: response.data[file.name]
        }
        this.imgUidList.push(imgUid)
      },
      removeImgList(file, fileList){
        let imgUidList = this.imgUidList
        for(let i = 0; i < imgUidList.length; i++){
          if (imgUidList[i].uid==file.uid){
            this.imgUidList.splice(i,1)
            break
          }
        }
      },
      /** 图片相关操作---结束 **/

      /** 分类选择---开始 **/
      resetCategory(){
        /** 分类选择重置 **/
        this.categoryThirdId = ""
        this.categoryThirds = [];
        this.categoryThirdDisabled = true;
        this.categorySecondId = ""
        this.categorySeconds = [];
        this.categorySecondDisabled = true;
        this.categoryTopId = ""
        /** 重新显示属性列 **/
        this.attributeForm = {attributes: []};
      },
      changeTopCategory(value){
        /** Top分类change事件 **/
        this.categoryThirdId = ""
        this.categoryThirds = [];
        this.categoryThirdDisabled = true;
        this.categorySecondId = ""
        this.categorySeconds = [];
        this.categorySecondDisabled = true;
        /** 重新显示属性列 **/
        this.attributeForm = {attributes: []};
        if (value.children.length > 0){
          /** 该Top分类下有子分类 放开可选择 **/
          this.categorySeconds = value.children;
          this.categorySecondDisabled = false;
        }
      },
      changeSecondCategory(value){
        /** 二级分类change事件 **/
        this.categoryThirdId = ""
        this.categoryThirds = [];
        this.categoryThirdDisabled = true;
        /** 重新显示属性列 **/
        this.attributeForm = {attributes: []};
        if (value.children.length > 0){
          /** 该Top分类下有子分类 放开可选择 **/
          this.categoryThirds = value.children;
          this.categoryThirdDisabled = false;
        }
        if (value.id.length == 32){
          this.initAttribute(value.id)
        }
      },
      changeThirdCategory(value){
        /** 三级分类change事件 **/
        /** 重新显示属性列 **/
        this.attributeForm = {attributes: []};
        if (value.id.length == 32){
          this.initAttribute(value.id)
        }
      },
      initAttribute(value){
        /** 选择分类后，初始化分类属性 **/
        forSaleApi.getAttributes(value).then(res => {
          for (let i = 0; i < res.data.length; i++){
            this.attributeForm.attributes.push({goodsAttrs: new Array(JSON.parse(JSON.stringify(res.data[i])))})
          }
          // this.attributeForm.attributes = JSON.parse(JSON.stringify(res.data));
        }).catch(() => {

        })
      },
      removeGoodsAttr(goodsAttr, attribute){
        /** 移除分类属性列 **/
        if(attribute.goodsAttrs.length < 2){
          /** 如果该属性列只剩一列了，就不能删除了 **/
          this.$notify.warning({title:'提示', message:'该属性只剩最后一列，不能再删除了！'});
          return false;
        }
        let index = attribute.goodsAttrs.indexOf(goodsAttr);
        if (index !== -1){
          attribute.goodsAttrs.splice(index, 1);
        }
      },
      addGoodsAttr(attribute, indexTop){
        /** 添加分类属性值 **/
        let maxObj = attribute.goodsAttrs[attribute.goodsAttrs.length-1];
        attribute.goodsAttrs.push({attrId:maxObj.attrId, attrName:maxObj.attrName, keyId:maxObj.keyId+1});
      },
      restGoodsAttr(attribute, indexTop){
        this.$refs['attribute'][indexTop].resetFields();
      },
      /** 分类选择---结束 **/

      nextAdd(){
        /** 继续添加 **/
        this.reload();
      },
      /** 规则校验 **/
      beforeUploadImgRule(isFormat,formatValue, isLt, ltValue){
        // 图片格式、大小规则检验
        if (!isFormat) {
          this.$notify.warning({title:'提示', message:'上传图片只能是 '+formatValue+' 格式!'});
        }
        if (!isLt) {
          this.$notify.warning({title:'提示', message:'上传图片大小不能超过 '+ltValue+'!'});
        }
      },
      valueLengthRule(value, name, maxlength){
        if (value.length > maxlength){
          return new Error(name + '不能超过'+ maxlength +'个字')
        }
      },
      buttonDisabledRule(status){
        switch (status) {
          case 1:
            // 提交开始
            /** 提交框不可点击 **/
            this.disabledSubmit = true;
            /** 所有信息框不可操作 **/
            this.disabledGoods = true;
            /** 二级分类不可选 **/
            this.categorySecondDisabled = true;
            /** 三级级分类不可选 **/
            this.categoryThirdDisabled = true;
            break;
          case 2:
            // 提交失败
            /** 提交框可点击 **/
            this.disabledSubmit = false;
            /** 所有信息框可操作 **/
            this.disabledGoods = false;
            /** 二级分类可选 **/
            this.categorySecondDisabled = true;
            /** 三级级分类可选 **/
            this.categoryThirdDisabled = true;
            break;
          case 3:
            // 提交成功
            /** 提交框不可点击 **/
            this.disabledSubmit = true;
            // this.disabledSubmit = false;
            /** 所有信息框不可操作 **/
            this.disabledGoods = true;
            /** 二级分类不可选 **/
            this.categorySecondDisabled = true;
            /** 三级级分类不可选 **/
            this.categoryThirdDisabled = true;
            /** 继续添加按钮 **/
            this.nextAddButton = true;
            break;
        }
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .source{
    width: 100%;
    min-width: 800px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .li-input-title {
    text-align: right;
    line-height: 40px;
    width: 100px;
    float: left;
  }
</style>
